<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card" :style="{height:curHeight+'px'}">
      <el-table :data="welfareList"  :height="tabHeight" border stripe style="width: 100%">
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="创建日期" align="left" prop="dateFormatter" width="110">
          <template slot-scope="scope">
            {{ scope.row.createDate | dateFormatter }}
          </template>
        </el-table-column>
        <el-table-column label="摘要" align="left" prop="memo"></el-table-column>
        <el-table-column label="余额" align="left" prop="balance" width="110"></el-table-column>
        <el-table-column label="收入" align="center" prop="credit" width="110"></el-table-column>
        <el-table-column label="支出" align="left" prop="debit" width="110" ></el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      style="padding-top: 15px;"
      :current-page="pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import {EventBus} from "@/api/eventBus";
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import {cardBillList} from '@/api/cardBill'
  export default {
    directives: {elDragDialog,permission},
    name: 'member-welfareBill',
    data(){
      return{
        welfareList:[],
        pageSize: 20,
        pageNum: 1,
        total: 0,
        curHeight:null,
        tabHeight:null
      }
    },
    mounted(){
      this.comeIn()
      this.beforeMount()
    },
    methods:{
      initcardBill(){
        const params = {
          memberId: this.$route.query.memberId,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          cardId:this.$route.query.id
        }
        cardBillList(params).then(res => {
          console.log(res)
          this.total = res.data.total
          this.welfareList = res.data.data
        }).catch(err => { console.log(err) })
      },
      handleSizeChange(value) {
        this.pageSize = value
        this.initcardBill()
      },
      handleCurrentChange(value) {
        this.pageNum = value
        this.initcardBill()
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 160//减去页面上固定高度height
              _this.tabHeight = h-200
          })();
        };
      },
      comeIn(){
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 160//减去页面上固定高度height
        this.tabHeight = h-200
      },
    },
    filters:{
    },
    created() {
      this.initcardBill()
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }
  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
  }
  .popup_content {
    padding-bottom: 0px !important;
  }
  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-size: 16px;
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 150px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }
  deleted_OrderTitle_span{
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
  }
  .deleted_OrderTitle {
    font-size: 14px;
  }
  .updateButton{
    border-radius: 5px;
    height: 35.6px;
    width: 98px;
  }
  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .table_Header {
    width: 100%;
    background-color: #f5f7fa;
    padding: 10px;
  }
  .table_HeaderTitle {
    font-size: 12px;
    color: #353535;
    font-weight: 600;
  }
  .align_items {
    display: flex;
    align-items: center;
  }
  .justify_left {
    display: flex;
    align-items: center;
  }
  .justify_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .table_ContentTitle {
    font-size: 12px;
    color: #353535;
  }
  .shop_Height {
    min-height: 30px;
  }
  .deleted_Row_Headings{
    font-size: 14px;
    color: #666666;
    width: 85px;
  }
  .deleted_OrderName {
    font-size: 14px;
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
